import {AppstoreOutlined, HomeOutlined, ProfileOutlined, GithubOutlined, SearchOutlined,FacebookOutlined,
    LinkedinOutlined,
    TwitterOutlined,
    YoutubeOutlined} from '@ant-design/icons';
import type {MenuProps, MenuTheme} from 'antd';
import './App.css'
import {Menu, Layout, Avatar, Button, Tag, Breadcrumb, PageHeader} from 'antd';
import React, {useState} from 'react';
import {Route, Routes, useNavigate, useResolvedPath} from 'react-router-dom'
import Home from "./pages/Home";
import Group from "./pages/Group";
import Info from "./pages/Info";
import CameraComponent from "./pages/Home/CameraComponent";

const {Header, Footer, Sider, Content} = Layout;

type MenuItem = Required<MenuProps>['items'][number];


function getItem(
    label: React.ReactNode,
    key?: React.Key | null,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: 'group',
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
        type,
    } as MenuItem;
}

const items: MenuItem[] = [
    getItem('首页', '/', <HomeOutlined />, [
        getItem('人脸识别', '/Home/FaceSearch'),
        getItem('人脸识别初版', '/Home/FaceSearchOld'),
    ]),

    getItem('分组管理', '/Group', <AppstoreOutlined/>, [
        getItem('单元信息管理', '/Group/Unit'),
    ]),

    getItem('信息管理', '3', <ProfileOutlined />, [
        getItem('用户信息管理', '/Info/UserInfo'),
    ]),
];

const App: React.FC = () => {
    const [theme, setTheme] = useState<MenuTheme>('dark');
    const [outLine, setOutLine] = useState(null);
    const [BreadcrumbInfo, setBreadcrumbInfo] = useState<String>('home');
    const [CurrentRoutes, setCurrentRoute] = useState(null);
    const [current, setCurrent] = useState('1');
    const navigate = useNavigate();
    const onClick: MenuProps['onClick'] = e => {
        console.log('click ', e);
        setCurrent(e.key);
        setBreadcrumbInfo(e.key)
        navigate(e.key)
    };

    return (
        <>
            <Layout>
                <Sider style={{height:'800px'}} width={256}>
                    <div className="sider-header">
                        <Avatar icon={<GithubOutlined/>} style={{verticalAlign: 'middle'}} size="large">
                        </Avatar>&nbsp;&nbsp;
                        Face-Manager
                    </div>
                    <Menu
                        theme={theme}
                        onClick={onClick}
                        style={{width: 256}}
                        defaultOpenKeys={['sub1']}
                        selectedKeys={[current]}
                        mode="inline"
                        items={items}
                    /></Sider>
                <Layout>
                    <Header className="app-header">
                        <Button style={{margin:"0 10px"}} icon={<SearchOutlined/>} href="https://www.google.com"/>
                        <Tag icon={<TwitterOutlined />} color="#55acee">
                            Twitter
                        </Tag>
                        <Tag icon={<YoutubeOutlined />} color="#cd201f">
                            Youtube
                        </Tag>
                        <Tag icon={<FacebookOutlined />} color="#3b5999">
                            Facebook
                        </Tag>
                        <Tag icon={<LinkedinOutlined />} color="#55acee">
                            LinkedIn
                        </Tag>
                    </Header>
                    <Content>
                        <Routes>
                            <Route element={<Home/>} path={"/home/faceSearch"}></Route>
                            <Route element={<CameraComponent/>} path={"/home/faceSearchOld"}></Route>
                            <Route element={<Group/>} path={"/group/unit"}></Route>
                            <Route element={<Info/>} path={"/info/userInfo"}></Route>
                            <Route element={<Home/>} path={"/"}></Route>
                        </Routes>
                    </Content>
                    <Footer></Footer>
                </Layout>
            </Layout>
        </>
    );
};

export default App;
